import React from 'react'

function Login(props) {
    return (
        <div>
            you are not login,
            <button type="button" onClick={ props.onClick } >click me to Login out</button>
        </div>
    )
}

function LoginOut(props) {
    return (
        <div>
            you are login,
            <button type="button" onClick={ props.onClick } >click me to Login out</button>
        </div>
    )
}

function Warn(props) {
    if(!props.warn) {
        return null
    }else {
        return (
            <div>
                Warn
            </div>
        )
    }
}

class LoginBox extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLogin : false,
            showWarning : false,
            warn : false
        }
    }

    handleLogin() {
        this.setState({
            isLogin : true
        })
    }

    handleLoginOut() {
        this.setState({
            isLogin : false
        })
    }

    handleWarn() {
        this.setState({
            warn : !this.state.warn
        })
    }
    render() {
        const isLogin = this.state.isLogin;

        return (
            <div>
                <Warn warn={this.state.warn} />
                { isLogin ? (
                    <div>
                        <LoginOut onClick={this.handleLoginOut.bind(this)} />
                    </div>
                ) : (
                    <Login onClick={ this.handleLogin.bind(this)} />
                ) }

                <button onClick={ this.handleWarn.bind(this) }>warn control</button>
            </div>
            )
    }
}

export default LoginBox;